<template>
  <div
    ref="powerChart1"
    class="charts"
    style="width: 100%; height: 400px"
  ></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import emitter from '@/utilities/emitter';
import { usePowerControlStore } from '@/store/SystemManagement/Power/PowerControlStore';
import { useI18n } from 'vue-i18n';

const i18n = reactive(useI18n());

const powerControlStore = usePowerControlStore();
const powerChart1 = ref();

const dataZoom = ref({
  start: 0,
  end: 100,
});
const timer = ref(null as number | null);

const getRealTimeData = new Promise<void>((resolve) => {
  emitter.on('getRealTimeData-complete', () => {
    resolve();
  });
});
await Promise.all([getRealTimeData]);

onMounted(async () => {
  var powerChart = echarts.init(powerChart1.value);
  var setPowerChart = function () {
    // This setTimeout is set to filter initial powerConsumptionValue value 0.
    setTimeout(() => {
      if (powerChart.getOption()) {
        [dataZoom.value.start, dataZoom.value.end] = [
          (powerChart.getOption() as any).dataZoom[0].start,
          (powerChart.getOption() as any).dataZoom[0].end,
        ];
      }
      let option = {
        backgroundColor: '',
        tooltip: {
          trigger: 'axis',
          position: function (pt: any[]) {
            return [pt[0], '10%'];
          },
        },
        title: {
          left: 'center',
          text: i18n.t('pagePower.table.title1'),
        },
        xAxis: {
          name: i18n.t('pagePower.table.time'),
          type: 'time',
          boundaryGap: false,
        },
        yAxis: {
          name: i18n.t('pagePower.table.power'),
          type: 'value',
          axisLabel: {
            show: true,
            interval: 'auto',
          },
          splitLine: {
            show: false,
          },
          min: () => 0,
          max: () => ReadingRangeMax.value,
          show: true,
          boundaryGap: false,
        },
        dataZoom: [
          {
            type: 'inside',
            start: dataZoom.value.start,
            end: dataZoom.value.end,
          },
          {
            type: 'slider',
            start: 0,
            end: 20,
          },
        ],
        series: [
          {
            name: 'Power',
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {},
            data: powerChartData1.value,
          },
        ],
      };
      powerChart.setOption(option, {
        notMerge: false,
        lazyUpdate: true,
        silent: false,
      });
    }, 1000);
    return setPowerChart;
  };

  // Refresh the chart per 5 seconds
  timer.value = setInterval(() => {
    setPowerChart();
    powerChart.resize();
  }, 1000);
});

const powerChartData1 = computed(() => powerControlStore.powerChartData1);
const ReadingRangeMax = computed(() => powerControlStore.ReadingRangeMax);

onBeforeUnmount(() => {
  clearInterval(timer.value as number);
});
</script>
